<template>
  <el-row>
    <div class="search-box">
      <div class="input-box">
        <el-input placeholder="寻找心意宠物🐈‍⬛" v-model="keywork" clearable @clear="initPetList">
          <el-button slot="append" icon="el-icon-search" @click="searchForPet"></el-button>
        </el-input>
        <el-dropdown size="medium" split-button type="primary">
          宠物分类
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><el-button type="text" @click="initPetList">全部</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="text" @click="dog">狗狗</el-button></el-dropdown-item>
            <el-dropdown-item><el-button type="text" @click="cat">猫咪</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <h1>Pet of heart</h1>
      <el-card v-for="i in petList" :key="i.No">
        <img :src="i.url" class="image" @click="toDetail(i)" />
        <div style="padding: 14px">
          <span style="color: #606266">NO：{{ i.No }}</span
          ><br />
          <span style="color: #606266">{{ i.name }}</span
          ><br />
          <span style="color: #f56c6c">价格：{{ i.price }}</span>

          <div class="bottom clearfix">
            <el-button type="text" class="button" @click="toDetail(i)">详细>></el-button>
          </div>
        </div>
      </el-card>
    </div>
  </el-row>
</template>

<script>
import { searchPet, petSort } from '@/api/pet'
export default {
  name: 'Search',
  data() {
    return {
      petList: [],
      keywork: '',
    }
  },
  created() {
    // this.petList = this.$store.state.petList
    this.initPetList()
  },
  methods: {
    toDetail(i) {
      this.$router.push({
        name: 'info',
        params: {
          No: i.No,
          name: i.name,
          url: i.url,
          pStatus: i.pStatus,
          sex: i.sex,
          birthday: i.birthday,
          breed: i.breed,
          blood: i.blood,
          price: i.price,
          features: i.features,
        },
      })
      const petData = {
        No: i.No,
        name: i.name,
        url: i.url,
        pStatus: i.pStatus,
        sex: i.sex,
        birthday: i.birthday,
        breed: i.breed,
        blood: i.blood,
        price: i.price,
        features: i.features,
      }
      this.$store.commit('setPetData', petData)
    },
    initPetList() {
      this.petList = this.$store.state.petList
    },
    searchForPet() {
      searchPet({ name: this.keywork }).then((result) => {
        this.petList = result.data
      })
    },
    dog() {
      petSort({ sort: 1 }).then((result) => (this.petList = result.data))
    },
    cat() {
      petSort({ sort: 2 }).then((result) => (this.petList = result.data))
    },
  },
}
</script>

<style scoped lang="less">
.search-box {
  width: 1000px;
  margin: 0 auto;
  .input-box {
    width: 300px;
    margin-bottom: 30px;
  }
}

.el-input {
  width: 300px;
  margin-bottom: 15px;
}
.el-card {
  width: 300px;
  float: left;
  margin: 10px;
}
.image {
  width: 100%;
  height: 300px;
  border-radius: 20px;
}
h1 {
  color: rgb(152, 103, 61);
  font-style: italic;
}
</style>
